<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 登录表单名称 -->
      <h2 class="login_head button">汽车管理检测系统</h2>
      <!-- 登录表单区域 -->
      <div class="login_from">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          label-width="0px"
        >
          <!-- 用户 -->
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              prefix-icon="iconfont icon-user"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              prefix-icon="iconfont icon-lock_fill"
              type="password"
              placeholder="请输入密码"
              @keyup.enter="login"
            ></el-input>
          </el-form-item>
          <!-- 选择框 -->
          <el-select
            v-model="loginForm.site"
            placeholder="请选择"
            
          >
            <el-option label="*"></el-option>
          </el-select>
          <!-- 按钮 -->
          <el-form-item>
            <div class="btns">
              <el-button type="primary" @click="login">登录</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
	<div style="width: 240px;color: white;font-size: 20px;">
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">admin</span>
			<span>超级管理员</span>
		</div>
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">administrators</span>
			<span>管理员</span>
		</div>
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">librarian</span>
			<span>库管员</span>
		</div>
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">operator</span>
			<span>操作员</span>
		</div>
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">inspector</span>
			<span>质检员</span>
		</div>
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">planner</span>
			<span>计划员</span>
		</div>
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">technician</span>
			<span>技术员</span>
		</div>
		<div>
			<span style="display: inline-block;width: 140px;margin-bottom: 10px;">statistician</span>
			<span>统计员</span>
		</div>
	</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 登录表单的数据绑定对象
      loginForm: {
        username: "",
        password: "",
        site: "*",
      },
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
      },
      options: [
        {
          value: "选项1",
          label: "*",
        },
      ],
    };
  },
  methods: {
    login() {
      let formdata = new FormData();
      formdata.append("username", this.loginForm.username);
      formdata.append("password", this.loginForm.password);
      formdata.append("site", this.loginForm.site);
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/login.shtml",
        data: formdata,
      }).then((res) => {
        console.log(res);
        if (res.data == "success") {
          this.$message.success("登录成功");
          this.$router.push("/home");
          localStorage.setItem("username", this.loginForm.username);
        } else {
          this.$message("错误类型:"+res.data)
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  background: url(../assets/loginBG.png);
  background-size: cover;
  height: 100%;
}

.login_box {
  width: 280px;
  height: 280px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .login_head {
    text-align: center;
    color: white;
    font-size: 24px;
    margin: 5px auto 5px;
  }
}
.login_from {
  position: absolute;
  top: 50px;
  width: 100%;
  height: 197px;
  box-sizing: border-box;
  .el-form {
    width: 80%;
    margin: 0 auto;
    .el-input__inner {
      height: 38px;
    }
    .el-select {
      width: 224px;
    }
  }
  .btns {
    margin-top: 15px;
    .el-button {
      width: 224px;
      background-color: #009688;
      border: none;
    }
  }
}
.el-form-item {
  margin-bottom: 15px;
}
.logo {
  width: 260px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.users {
  width: 800px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

// 设置文字不可选择
.button {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
</style>
